<template>
    <div>
        <vxe-card>
            <div class="login-title">
                <img src="@/assets/logo.png" alt="">
                <span>光速内部管理系统</span>
            </div>

            <div class="login-desc">QTrade 研发的简洁高效、极致流畅的管理系统</div>

            <vxe-form v-bind="formData" @submit="submitEvent">
                <vxe-form-item title="账号" field="account" span="24">
                    <vxe-input v-model="formData.account" :disabled="isAccountInputDisabled" placeholder="请输入账号"/>
                </vxe-form-item>

                <vxe-form-item title="密码" field="password" span="24">
                    <vxe-input v-model="formData.password" :disabled="isPasswordInputDisabled" placeholder="请输入密码" type="password" clearable/>
                </vxe-form-item>

                <vxe-form-item span="24">
                    <vxe-row>
                        <vxe-col span="12">
                            <vxe-checkbox v-model="isRememberPassword">记住密码</vxe-checkbox>
                        </vxe-col>

                        <vxe-col span="12" align="right">
                            <vxe-link status="primary">忘记密码？</vxe-link>
                        </vxe-col>
                    </vxe-row>
                </vxe-form-item>

                <vxe-form-item span="24">
                    <vxe-button type="submit" status="primary" :loading="isLoading" style="width: 100%;">立即登录</vxe-button>
                </vxe-form-item>
            </vxe-form>
        </vxe-card>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/UseUserStore.ts';
import VxeUI, { VxeFormEvents } from 'vxe-pc-ui';
import { LoginFormData } from '@/entiy/form/LoginFormData.ts';

const router = useRouter()
const userStore = useUserStore()

const isRememberPassword = ref(true)
const isLoading = ref(false)
const isAccountInputDisabled = ref(false)
const isPasswordInputDisabled = ref(false)

const formData = ref<LoginFormData>({
    account: 'admin',
    password: '82790085228cf8a1e3bac41f45271e5f'
})

const submitEvent: VxeFormEvents.Submit = () => {
    isLoading.value = true;
    isAccountInputDisabled.value = true;
    isPasswordInputDisabled.value = true;

    userStore.login(formData.value).then(() => {
        router.push('/home')
    }).catch(() => {
        VxeUI.modal.alert({
            title: '系统提示',
            content: '登录失败, 账号或者密码错误！',
            draggable: false
        })
    }).finally(() => {
        isLoading.value = false;
        isAccountInputDisabled.value = false;
        isPasswordInputDisabled.value = false;
    })
}
</script>
